@import '../style/theme/color';

.devui-date-header {
  height: 38px;
}

.devui-month-view {
  background-color: $dropdown-overlay;
  font-size: 12px;
  width: 238px;
  text-align: center;
  box-shadow: 0 4px 8px 0 $dark-1-boxshadow;
  border-radius: 2px;
  position: relative;
}

.devui-month-view .devui-month-view-table {
  margin-bottom: 0;
  background: $dropdown-overlay;
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
}

.devui-month-view .devui-date-title {
  font-weight: bold;
  cursor: pointer;
  font-size: 12px;
}

.devui-month-view .devui-btn-link {
  text-decoration: none;
  cursor: pointer;
  display: block;

  &.devui-year-month-disabled {
    cursor: not-allowed;

    svg path,
    svg polygon {
      fill: $disabled-content;
    }
  }

  svg path,
  svg polygon {
    fill: $dark-2;
  }

  &:not(.devui-year-month-disabled):hover {
    svg {
      path,
      polygon {
        fill: $hover-control;
      }
    }
  }
}

.devui-month-view .date-select {
  border: none;
  background: transparent;
  outline: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}

.devui-month-view .devui-week-header {
  cursor: default;
  margin-bottom: 16px;
}

.devui-month-view .devui-week-header td {
  width: 32px;
  height: 24px;
  line-height: 24px;
  color: $dark-1;
  border: none;
}

.devui-month-view .devui-day:not(.disabled) {
  cursor: pointer;
  font-size: 12px;
  color: $hwc-feedback-overlay-font-color;
}

.devui-month-view .devui-day.disabled {
  cursor: not-allowed;
}

.devui-calendar-date {
  display: block;
  margin: 0 3px;
  width: 20px;
  height: 20px;
  padding: 0;
  line-height: 20px;
  background: transparent;
  text-align: center;
  -webkit-transition: background 0.3s ease;
  transition: background 0.3s ease;
  font-size: 12px;
  color: $dark-1;
}

.devui-month-view .devui-out-of-month {
  .devui-calendar-date {
    opacity: 0.8;
    background-color: $dropdown-overlay;
    color: $gray-1;
  }

  &:hover {
    .devui-calendar-date {
      background-color: $hover-content;
    }
  }
}

.devui-month-view .devui-minutes::before {
  content: ':';
  text-align: center;
  position: absolute;
  margin-left: -13px;
}

.devui-month-view .devui-seconds::before {
  content: ':';
  text-align: center;
  position: absolute;
  margin-left: -13px;
  z-index: 999;
}

.devui-yearOption,
.devui-monthOption {
  width: 240px;
  height: 195px;
  position: absolute;
  left: -68px;
  top: 30px;
  z-index: 1;
  background: $bg-white;
}

.devui-yearOption li,
.devui-monthOption li {
  width: 60px;
  height: 65px;
  line-height: 65px;
  text-align: center;
  display: inline-block;
  background: $bg-white;
  border-radius: 2px;
}

.devui-yearOption li:hover,
.devui-monthOption li:hover {
  background: $hover-control;
  color: $font-white;
  cursor: pointer;
}

.devui-yearOption li.active:not(.disabled),
.devui-monthOption li.active:not(.disabled) {
  color: $font-white;
  background-color: $brand-1;

  &:hover {
    background-color: $hover-control;
  }
}

.devui-yearOption li.disabled,
.devui-monthOption li.disabled {
  color: $disabled-content;
  background-color: $disabled-bg;
}

.devui-month-view .devui-timepicker {
  background: $gray-3;
  display: flex;
  justify-content: space-evenly;
}

.devui-month-view .devui-timepicker input {
  outline: 0;
  border: 0;
  background: $gray-3;
  color: $dark-1;
  width: 30px;
  padding: 0 0 0 3px;
  height: 30px;
  text-align: center;
}

.devui-month-view .devui-timepicker.devui-timepicker-disabled input {
  cursor: not-allowed;
  color: $disabled-content;
  background-color: $disabled-bg;
}

.devui-month-view .devui-timepicker .devui-time {
  position: relative;
  display: inline-block;
  width: 40px;
}

.devui-month-view .devui-timepicker .devui-time:not(:first-child)::before {
  content: ':';
}

.devui-month-view .devui-table {
  > tbody {
    > tr {
      > td {
        vertical-align: middle;
        padding: 4px;
        border-top: none;
        border-radius: 2px;

        &:not(.disabled) {
          border-top: none;
          background: $dropdown-overlay;
        }

        &.devui-day:hover:not(.active):not(.disabled):not(.devui-out-of-month) {
          background-color: $hover-content;
        }

        &.devui-day:not(.disabled).active:hover {
          background-color: $hover-control;

          & > .devui-calendar-date {
            color: $font-white;
          }
        }

        &.devui-in-month-day.disabled {
          color: $disabled-content;
          cursor: not-allowed;

          .devui-calendar-date {
            color: $disabled-content;
          }

          &:not(.active) {
            background-color: $disabled-bg;
          }

          &.active {
            background-color: $disabled-border;
          }
        }

        &.devui-in-month-day:not(.disabled).active {
          background: $hwc-color-bg-active;

          & > .devui-calendar-date {
            color: $font-white;
          }
        }
      }
    }
  }

  > thead {
    > tr {
      > td {
        vertical-align: middle;
        line-height: 1.5;
        padding: 4px;
      }
    }
  }
}

.devui-noSelect {
  user-select: none;
}

.devui-month-view .devui-month-view-table td {
  border-bottom: none;
}

.devui-month-view .devui-table tfoot {
  border-top: 1px solid $gray-3;
}

.devui-month-view tfoot td {
  padding: 10px;
  vertical-align: middle;
  border-top: none;
}

.devui-dropdown-menu {
  font-size: 12px;
}

.devui-btn-wrapper {
  margin-top: 0;
}

.devui-time input[type='number']::-webkit-inner-spin-button,
.devui-time input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.devui-time input[type='number'] {
  -moz-appearance: textfield;
}

.devui-btn-nav {
  display: none;
  position: absolute;
  right: 9px;
  top: 0;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;

  .btn-up,
  .btn-down {
    position: absolute;
    width: 0;
    height: 0;
    border: 6px solid;
  }

  .btn-up {
    padding-top: 2px;
    padding-bottom: 1px;
    border-color: transparent transparent $dark-1 transparent;

    &:hover {
      border-color: transparent transparent $hover-control transparent;
    }
  }

  .btn-down {
    top: 16px;
    padding-bottom: 4px;
    border-color: $dark-1 transparent transparent transparent;

    &:hover {
      border-color: $hover-control transparent transparent transparent;
    }
  }
}

.devui-time {
  input[type='number']::-webkit-inner-spin-button,
  input[type='number']::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  input[type='number'] {
    -moz-appearance: textfield;
  }

  &:hover {
    .devui-btn-nav {
      display: block;
    }
  }
}

:host ::ng-deep .cdk-overlay-pane d-datepicker.devui-dropdown-menu {
  padding: 0;
}

:host .devui-form-control {
  padding-right: 0;
}
